<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Contact</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
	<link rel="icon" th:href="@{/ico/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">

    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="../static/css/my-style.css" th:href="@{/css/my-style.css}"/>
	<link rel="stylesheet" type="text/css" href="../static/css/shopcar.css" th:href="@{/css/shopcar.css}"/>
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="../static/css/font-awesome.css" th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
	<link href="http://at.alicdn.com/t/font_1812647_baid87hyd3d.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <!-- //Fonts -->

	<!-- jquery-confirm -->
	<link rel="stylesheet" href="../static/css/jquery-confirm.css" th:href="@{/css/jquery-confirm.css}">

	<script type="text/javascript" src="../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
	<script type="text/javascript" src="../static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>

	<script type="text/javascript" src="../static/js/jquery-confirm.js" th:src="@{/js/jquery-confirm.js}"></script>

	
</head>
<body>
    <div class="main-sec inner-page">
        <!-- //header -->
		<header th:replace="_fragments :: menu(6)" class="py-sm-3 pt-3 pb-2" id="home">
			<div class="container">
				<!-- nav -->
				<div class="top-w3pvt d-flex">
					<div id="logo">
						<h1> <a href="index.html"><span class="log-w3pvt">B</span>aggage</a> <label class="sub-des">Online Store</label></h1>
					</div>
		
					<div class="forms ml-auto">
						<span class="avatar">
							<span>用户名</span>
						</span>
						<a href="login.html" class="btn"><span class="fa fa-user-circle-o"></span> 登录</a>
						<a href="register.html" class="btn"><span class="fa fa-pencil-square-o"></span> 注册</a>
					</div>
				</div>
				<div class="nav-top-wthree">
					<nav>
						<label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
						<input type="checkbox" id="drop" />
						<ul class="menu">
							<li ><a href="index.html">主页</a></li>
							<li><a href="about.html">关于我们</a></li>
							<li>
								<!-- First Tier Drop Down -->
								<label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
								</label>
								<a href="#">系列 <span class="fa fa-angle-down" aria-hidden="true"></span></a>
								<input type="checkbox" id="drop-2" />
								<ul>
									<li><a href="about.html" class="drop-text">特色</a></li>
									<li><a href="goods.html" class="drop-text">热卖</a></li>
								</ul>
							</li>
		
							<li><a href="shop.html">商品</a></li>
							<li><a href="contact.html">联系我们</a></li>
							<li class="active"><a href="shopcar.html">购物车</a></li>
						</ul>
					</nav>
					<!-- //nav -->
					<div class="search-form ml-auto">
						<div class="form-w3layouts-grid">
							<form action="#" method="post" class="newsletter">
								<input class="search" type="search" placeholder="Search here..." required="">
								<button class="form-control btn" value=""><span class="fa fa-search"></span></button>
							</form>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</header>
		<!-- //header -->
    </div>
	
	<!-- shopcar -->
	<div id="shopCar-main">

		<p th:if="${page.getTotalElements()== 0}">购物车没有商品，请去商店购买</p>
		<div if="shopCar" th:if="${page.getTotalElements() > 0}">
			<!--shocar_header -->
			<div style="width: 1080px;margin: 0 auto;">
				<h4 class="shopcar-header">全部商品</h4>
				<div class="car-header">
					<div class="mycolumn mycol-1">
						<input type="checkbox" class="check-goods">
						<span>全选</span>
					</div>
					<div class="mycolumn mycol-2">
						商品
					</div>

					<div class="mycolumn mycol-3">
						商品信息
					</div>
					<div class="mycolumn mycol-8">
						颜色
					</div>
					<div class="mycolumn mycol-4">
						单价
					</div>
					<div class="mycolumn mycol-5 mycol-5-pad" style="padding-left: 31px;">
						数量
					</div>
					<div class="mycolumn mycol-6">
						小计
					</div>
					<div class="mycolumn mycol-7">
						操作
					</div>
				</div>
			</div>

			<!-- 购物商品列表 -->
			<div class="goods-list" th:fragment="goods_list" th:each="goods:${page.content}">
				<div class="mycolumn mycol-1 mycol-goods-1">
					<input type="hidden" name="goodsId" th:value="${goods.id}">
					<input type="checkbox" name="goods" th:attr="data-id=${goods.id}">
					<img src="../static/images/b1.jpg" th:src="${goods.img}">
				</div>
				<div class="mycolumn mycol-2 mycol-goods-2">
					<span th:text="${goods.name}">金利来女包简约时尚手提包包女2020新款 斜挎包大容量单肩包百搭</span>
				</div>
				<div class="mycolumn mycol-3 mycol-goods-3">
					<span th:text="${goods.info2}">Goldlion/金利来 欧美时尚 纯色 拉链暗袋 2018年秋冬 单肩斜挎手提</span>
				</div>
				<div class="mycolumn mycol-8 mycol-goods-8">
					<span th:text="${goods.color}">红色</span>
				</div>
				<div class="mycolumn mycol-4 mycol-gods-4">
					￥<span class="price" th:text="${#numbers.formatDecimal(goods.price,0,2)}">866.45</span>
				</div>
				<div class="mycolumn mycol-5">
					<div class="goods-num">
						<!-- 写在一行消除之间的间隙 -->
						<input class="goods-sub" type="text" value="-" readonly="readonly"><input class="goods-input" type="text" th:value="${goods.num}"  value="1" oninput = "value=value.replace(/[^\d]/g,'')" ><input class="goods-add"  type="text" value="+" readonly="readonly">
					</div>
				</div>
				<div class="mycolumn mycol-6">
					￥<span class="total" th:text="${#numbers.formatDecimal(goods.price * goods.num,0,2)}">866.45</span>
				</div>
				<div class="mycolumn mycol-7">
					<button th:attr="data-id=${goods.id}" class="btn btn-danger btn-del" >删除</button>
				</div>
			</div>
			<!--		<div class="goods-list">
            <div class="mycolumn mycol-1 mycol-goods-1">
                <input type="checkbox" name="goods">
                <img src="../static/images/b1.jpg" th:src="@{/images/b1.jpg}">
            </div>
            <div class="mycolumn mycol-2 mycol-goods-2">
                <span>金利来女包简约时尚手提包包女2020新款 斜挎包大容量单肩包百搭</span>
            </div>
            <div class="mycolumn mycol-3 mycol-goods-3">
                <span>Goldlion/金利来 欧美时尚 纯色 拉链暗袋 2018年秋冬 单肩斜挎手提</span>
            </div>
            <div class="mycolumn mycol-8 mycol-goods-8">
                <span th:text="${goods.color}">红色</span>
            </div>
            <div class="mycolumn mycol-4 mycol-gods-4">
                ￥<span class="price">866.45</span>
            </div>
            <div class="mycolumn mycol-5">
                <div class="goods-num">
                    &lt;!&ndash; 写在一行消除之间的间隙 &ndash;&gt;
                    <input class="goods-sub" type="text" value="-" readonly="readonly"><input class="goods-input" type="text" value="1" oninput = "value=value.replace(/[^\d]/g,'')" ><input class="goods-add"  type="text" value="+" readonly="readonly">
                </div>
            </div>
            <div class="mycolumn mycol-6">
                ￥<span class="total">866.45</span>
            </div>
            <div class="mycolumn mycol-7">
                <a class="btn btn-danger btn-del "><span class="glyphicon glyphicon-trash"></span>删除</a>
            </div>
        </div>
        <div class="goods-list">
            <div class="mycolumn mycol-1 mycol-goods-1">
                <input type="checkbox" name="goods">
                <img src="../static/images/b1.jpg" th:src="@{/images/b1.jpg}">
            </div>
            <div class="mycolumn mycol-2 mycol-goods-2">
                <span>金利来女包简约时尚手提包包女2020新款 斜挎包大容量单肩包百搭</span>
            </div>
            <div class="mycolumn mycol-3 mycol-goods-3">
                <span>Goldlion/金利来 欧美时尚 纯色 拉链暗袋 2018年秋冬 单肩斜挎手提</span>
            </div>
            <div class="mycolumn mycol-8 mycol-goods-8">
                <span th:text="${goods.color}">红色</span>
            </div>
            <div class="mycolumn mycol-4 mycol-gods-4">
                ￥<span class="price">866.45</span>
            </div>
            <div class="mycolumn mycol-5">
                <div class="goods-num">
                    &lt;!&ndash; 写在一行消除之间的间隙 &ndash;&gt;
                    <input class="goods-sub" type="text" value="-" readonly="readonly"><input class="goods-input" type="text" value="1" oninput = "value=value.replace(/[^\d]/g,'')" ><input class="goods-add"  type="text" value="+" readonly="readonly">
                </div>
            </div>
            <div class="mycolumn mycol-6">
                ￥<span class="total">866.45</span>
            </div>
            <div class="mycolumn mycol-7">
                <a class="btn btn-danger btn-del "><span class="glyphicon glyphicon-trash"></span>删除</a>
            </div>
        </div>-->

			<!--分页按钮-->
			<div  class="page-btn">

				<ul class="pagination" >
					<li class="page-item">
						<a class="page-link" href="#" th:href="@{/shopcar(page=${page.number-1})}" th:unless="${page.first}">上一页</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#" th:href="@{/shopcar(page=0)}">首页</a>
					</li>
					<li>
						<a class="page-link" href="#" th:href="@{/shopcar(page=${page.totalPages-1})}">尾页</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#" th:href="@{/shopcar(page=${page.number+1})}" th:unless="${page.last}">下一页</a>
					</li>
				</ul>
			</div>

			<!-- 共计 -->
			<div class="car-footer">
				<div class="mycolumn mycol-1">
					<input type="checkbox" class="check-goods">
					<span >全选</span>
				</div>
				<div class="mycolumn mycol-2">
					<a class="btn btn-danger del-num">批量删除</a>
				</div>
				<div class="mycolumn car-footer-num">
					<span>已选<span class="total-num">0</span>件商品</span>
				</div>
				<div class="mycolumn car-footer-total">
					总价：￥<span class="settle">0.00</span>元
				</div>
				<div class="mycolumn car-footer-settle">
					<a href="javascript:void(-1);" class="btn btn-danger btn-settle"  onclick="show_modal();">去结账</a>
				</div>
			</div>


		</div>
	</div>
	

   <!--/newsletter -->
    <section class="newsletter-w3pvt py-5">
        <div class="container py-md-5">
            <form method="post" action="#">
                <p class="text-center">订阅手袋商店的邮件列表，以获取最新的新品、特别优惠和其他折扣信息。</p>
               <div class="row subscribe-sec">
                    <div class="col-md-9">
                        <input type="email" class="form-control" id="email" placeholder="输入你的邮箱.." name="email" required="">

                    </div>
                    <div class="col-md-3">

                        <button type="submit" class="btn submit">订阅</button>
                    </div>

                </div>
            </form>
        </div>
    </section>
    <!--//newsletter -->
    <!--/shipping-->
    <section class="shipping-wthree">
        <div class="shiopping-grids d-lg-flex">
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"><span class="fa fa-truck" aria-hidden="true"></span>
                </div>
                <div class="icon-gd-info">
                    <h3>免费送货</h3>
                    <p>所有订单超过2000元</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd sec text-center">
                <div class="icon-gd"><span class="fa fa-bullhorn" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>免费返回</h3>
                    <p>30天内第一次兑换</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"> <span class="fa fa-gift" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>会员折扣</h3>
                    <p>注册,节省29%</p>
                </div>

            </div>
        </div>

    </section>
    <!--//shipping-->
    <!-- footer -->
    <div th:replace="_fragments :: footer" class="footer_agileinfo_topf py-5">
        <div class="container py-md-5">
            <div class="row">
                <div class="col-lg-3 footer_wthree_gridf mt-lg-5">
                    <h2><a href="index.html"><span>B</span>aggage
                        </a> </h2>
                    <label class="sub-des2">Online Store</label>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-4">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="index.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Home</a>
                        </li>
                        <li>
                            <a href="about.html"><span class="fa fa-angle-right" aria-hidden="true"></span> About</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Collections</a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Extra Page</a>
                        </li>

                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span> Terms & Conditions</a>
                        </li>
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop Single</a>
                        </li>
                        <li>
                            <a href="contact.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Contact Us</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="login.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Login </a>
                        </li>

                        <li>
                            <a href="register.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Register</a>
                        </li>
                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span>Privacy & Policy</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="w3ls-fsocial-grid">
                <h3 class="sub-w3ls-headf">Follow Us</h3>
                <div class="social-ficons">
                    <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span> Facebook</a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span> Twitter</a></li>
                        <li><a href="#"><span class="fa fa-google"></span>Google</a></li>
                    </ul>
                </div>
            </div>
            <div class="move-top text-center mt-lg-4 mt-3">
                <a href="#home"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
    <!-- //footer -->

    <!-- copyright -->
    <div class="cpy-right text-center py-3">
		<p>Copyright &copy; 2020. 2.2  記憶ミ || 初见ミ</p>
    </div>
    <!-- //copyright -->	



</body>
</html>

<script type="text/javascript">

    function show_modal() {
        $('#myDeleteModal').modal('show');
    }



	//清空结账和选定商品数量
	function clearNum(){
		 var goodsSize = $(".goods-list").size();
		 if(goodsSize == 0){
			 //清空
			 $(".total-num").text("0");
			 $(".settle").text("0.00");
		 }
	}
	
	//计算结账
	$("input[name='goods']").click(function(){
		//结账
	    settle();
		calculateNum();
	});
	
	//选择商品数量
	function calculateNum(){
		var num = 0;
		$("input[name='goods']").each(function(index, element){
			if($(element).is(':checked')){
				num++;
			}
			$(".total-num").text(""+num);
		});
	}
	
	
	//减少商品数量
	$(".goods-sub").click(function(){
		
		var num = parseInt($(this).next().val());
			
		if(isNaN(num)){
			alert("输入了非法字符!");
			$(this).next().val("1");
			return;
		}
		if (num <= 1){
		    num =1;
		}

		if (num >= 2){
            var id = $(this).parent().parent().prev().prev().prev().prev().prev().children("input[name='goodsId']").val();
            id = parseInt(id);
            //console.log(id, num);
            //更新数据库数据
            $.ajax({
                url:"shopcar/sub",
                type:"post",
                data:{id:id, num:num},
                datatype:"json",
                success:function (data) {
                    if (data.status == "success"){
                        console.log("发送增加数量ajax请求");
                    }
                }

            });
		}

		num--;
		if(num<=0){
			num = 1;
		}
		
		//设置数量
		$(this).next().val(""+num);
		
		//获取单价
		var price= $(this).parent().parent().prev().children(".price").text();
		price = parseFloat(price);
		if(isNaN(price)){
			console.log("单价数据有误！");
			return;
		}

		var price_num =	parseInt($(this).next().val());

		//计算结果保留两位小数
		 var total = (price * price_num).toFixed(2);
		//alert(total);
		//设置总价
		$(this).parent().parent().next().children(".total").text(""+total);

        //结账
        settle();


		return;
	});
	
	//增加商品数量
	$(".goods-add").click(function(){
		
		var num = parseInt($(this).prev().val());
			
		if(isNaN(num)){
			alert("输入了非法字符!");
			$(this).prev().val("1");
			return;
		}
		num++;
		if(num<=0){
			num = 1;
		}
		$(this).prev().val(""+num);
		
		//获取单价
		var price= $(this).parent().parent().prev().children(".price").text();
		price = parseFloat(price);
		if(isNaN(price)){
			console.log("单价数据有误！");
			return;
		}
		//数量
		var price_num =	parseInt($(this).prev().val());
		
		//计算结果保留两位小数
		 var total = (price * price_num).toFixed(2);
		//alert(total);
		//设置总价
		$(this).parent().parent().next().children(".total").text(""+total);
        //结账
        settle();


        var id = $(this).parent().parent().prev().prev().prev().prev().prev().children("input[name='goodsId']").val();
		id = parseInt(id);
        //console.log(id, price_num);
        //更新数据库数据
            $.ajax({
			url:"shopcar/add",
			type:"post",
			data:{id:id, num:price_num},
			datatype:"json",
			success:function (data) {
				if (data.status == "success"){
				    console.log("发送增加数量ajax请求");
				}
            }
			
		});
		return;

	});
	
	//输入框失去焦点运算总价
	$(".goods-input").blur(function(){
		 
		 var price_num= $(this).val();
		 
		 //获取单价
		 var price= $(this).parent().parent().prev().children(".price").text();
		 price = parseFloat(price);
		 if(isNaN(price)){
		 	console.log("单价数据有误！");
		 	return;
		 }
		 
		 //计算结果保留两位小数
		  var total = (price * price_num).toFixed(2);
		 //设置总价
		 $(this).parent().parent().next().children(".total").text(""+total);
		 //settle();
		 return;
	});
	

	//删除
	$(".btn-del").click(function() {

	    var id = $(this).data("id");
	    id = parseInt(id);


        $.confirm({
            title: '确定',
            content: '是否确认删除该商品？',
            buttons: {
                ok: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function() {

                        //在页面删除
                        $(".btn-del").parent().parent().remove();

                        //删除后台数据
                        $.ajax({
                            url: "shopcar/delete",
                            type: "get",
                            datatype: 'json',
                            data:{id : id},
                            success: function () {
                                console.log("删除该商品成功！");
                                //删除dom节点

                                settle();
                                calculateNum();
                                clearNum();
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'btn-primary'
                }
            }
        });


	});



	//计算结账
	function settle(){
		var total = 0;
		$("input[name='goods']").each(function(index, element){
			if($(element).is(':checked')){
				var price = $(element).parent().next().next().next().next().next().next().children(".total").text();
				price = parseFloat(price);
				//console.log("price=",price);
				total += price;
			}
			//设置结账
			$(".settle").text(total.toFixed(2));
		});
	}
	
	//全选
	$(".check-goods").click(function(){
		//被选中
		if($(this).is(':checked')){
			//实现两个全部同步
			$(".check-goods").attr("checked","checked");
			$("input[name='goods']").attr("checked","checked");
		}
		else{
			$(".check-goods").removeAttr("checked");
			$("input[name='goods']").removeAttr("checked");
			
		}
		settle();
		calculateNum();
	});
	
	//批量删除
	$(".del-num").click(function(){

        $.confirm({
            title: '确定',
            content: '是否确认批量删除商品？',
            buttons: {
                ok: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function() {

                        var ids = new Array();
                        $("input[name='goods']").each(function(index,element){

                            //被选中就删除
                            if($(element).is(':checked')){

                                var  id= $(element).data("id");
                                ids.push(parseInt(id));
                                //删除
                                $(element).parent().parent().remove();
                            }

                        });

                        if (ids.length <= 0){
                            alert("请选择至少一条数据删除！");
                            return;
                        }

                        //发送ajax请求
                        $.ajax({
                            url: "shopcar/deleteNum",
                            type: "post",
                            traditional: true,
                            data: {"ids":ids},
                            datatype: "json",
                            success: function (data) {
                                if (data.status == "success"){
                                    console.log("批量删除成功");
                                }
                            }

                        });

                        settle();
                        calculateNum();
                        clearNum();
                        return;
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'btn-primary'
                }
            }
        });





	});
	
</script>